<!--
主轴、侧轴
    通过flex-direction手动设置的就是主轴（x/行/横向、或y/列/纵向），则另一个为侧轴。

弹性布局：父项属性
1、主轴方向、换行与否
    flex-direction
        - 主轴方向
        - row（默认，左到右）
        - row-reverse（右到左）
        - column（下到下）
        - column-reverse（下到上）
    flex-wrap
        - 挤满一行或一列后，子元素是否换行
        - nowrap（默认，不换行）
        - wrap（换行）
        - 注意：
            不换行且子容器总宽度大于父容器一行宽度时，子容器设置的宽度将无效，
            最终效果是一行宽度当做剩余空间均分给每个子容器，即缩小到一行上。（高度同理）
    flex-flow: row nowrap;
        - 主轴、换行的复合属性

2、主轴排列
    justify-content
        - 主轴上子元素的排列方式
        - 均分的是剩余空间
        - spance-around（不贴边，间隙不折叠）
        - spance-evently（不贴边，间隙折叠、一致）
        - space-between（贴边，间隙一致）
        - 主轴：横向
            center（水平居中）
            left（默认，设置高度时）、right
            flex-start（从头部开始，等同于left）、flex-end（从尾部开始，等同于right）
            start、end
            stretch（默认，子容器不设置高度时：拉伸，填充整列）
        - 主轴：纵向
            center（垂直居中）
            flex-start（默认，设置宽度时：从头部开始，等同于上）、flex-end（从尾部开始，等同于下）
            start、end
            stretch（默认，子容器不设置宽度时：拉伸，填充整行）

3、侧轴排列
    align-content（常用于多行多列）
        - 注意：父容器设置【换行】时，才生效（拉伸除外），【不换行】时无效。
        - 侧轴上子元素的排列方式（多行整体：行间无间隙，拉伸除外，多行作为整体内容）
        - 均分的是剩余空间
        - space-around、spance-between
        - center
        - flex-start、flex-end
        - stretch（默认，根据主轴方向子容器不设置宽或高时：拉伸，填充整行或整列）
    align-items（常用于单行单列）
        - 不换行也生效
        - 侧轴上子元素的排列方式（单行个体：行间有间隙，拉伸除外，单行作为个体成员）
        - 均分的是剩余空间
        - center
        - flex-start、flex-end
        - stretch（默认，根据主轴方向子容器不设置宽或高时：拉伸，填充整行或整列）

提示：
    居中问题
        1）先设置主轴为横向（纵向同理）
        2）再设置主轴居中，则为水平居中
        3）再设置侧轴居中，则为垂直居中
        4）主、侧一起设置，则为水平、垂直居中
    拉伸问题
        子容器只有
            不设置宽度（主轴为纵向）、
            或不设置高度（主轴为横向）时，
        拉伸才有效
    换行问题
        多行多列时，才有必要换行
            align-content   父容器设置【换行】时才生效，【不换行】时无效
        单行单列不必换行
            align-items     随意
        总之，多行换行找align-content，单行找align-items
-->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    div {
        /* 布局模式 */
        display: flex;

        /* 布局方式 */
        /* flex-direction: row;
        flex-wrap: wrap; */
        flex-flow: row wrap;

        /* 主轴排列 */
        justify-content: center;
        /* justify-content: space-between; */

        /* 侧轴排列 */
        /* 多行整体，不贴边，无间隙，拉伸除外 */
        /* align-content: center; */
        /* align-content: flex-start; */
        align-content: stretch;

        /* 侧轴排列 */
        /* 单行个体，不贴边，有间隙，拉伸除外 */
        /* align-items: center; */
        /* align-items: flex-start; */

        width: 550px;
        height: 270px;
        margin: 0 auto;
        background-color: cyan;
    }

    div span {
        /* 可以不设置宽度或高度，因为会均分剩余的所有空间 */
        width: 100px;
        /* 拉伸，只有在不设置宽度或高度时才生效 */
        /* height: 100px; */
        background-color: blue;
        color: #fff;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
</div>